/**
用法: <div class="mt-20 plr-30"></div>
解读：div 外边距top为20，内边距left,right均为30
**/
page{
	background: #f7f7f7;
	font-size: 32rpx;
}

$length: 1000;

@mixin create-ctx-style($len) {
  .mt-#{$len} {
    margin-top: 1upx * $len !important;
  }
  .ml-#{$len} {
    margin-left: 1upx * $len !important;
  }
  .mr-#{$len} {
    margin-right: 1upx * $len !important;
  }
  .mb-#{$len} {
    margin-bottom: 1upx * $len !important;
  }
  .mlr-#{$len} {
    margin: 0 1upx * $len !important;
  }
  .mtb-#{$len} {
    margin: 1upx * $len 0 !important;
  }
  .pt-#{$len} {
    padding-top: 1upx * $len !important;
  }
  .pl-#{$len} {
    padding-left: 1upx * $len !important;
  }
  .pr-#{$len} {
    padding-right: 1upx * $len !important;
  }
  .pb-#{$len} {
    padding-bottom: 1upx * $len !important;
  }
  .plr-#{$len} {
    box-sizing: border-box;
    padding-left: 1upx * $len !important;
    padding-right: 1upx * $len !important;
  }
  .ptb-#{$len} {
    box-sizing: border-box;
    padding-top: 1upx * $len !important;
    padding-bottom: 1upx * $len !important;
  }
  .padding-#{$len} {
    box-sizing: border-box;
    padding: 1upx * $len !important;
  }
	.fsize-#{$len} {
	  font-size: 1upx * $len !important;
	}
}

@while $length>=0 {
  @include create-ctx-style($length);
  $length: $length - 2;
}

/*1-1000*/
$local: 1000;

@while $local >=0 {
  .h-#{$local} {
    height: 1% * $local !important;
  }

  /*高度upx*/
  .height-#{$local} {
    height: 1upx * $local !important;
  }
  /* 行高 */
  .lh-#{$local}{
    line-height: 1upx * $local !important;
  }
  /*宽度度百分比*/
  .w-#{$local} {
    width: 1% * $local !important;
  }
	.border-radius-#{$local}{
		border-radius: 1upx * $local !important;
	}
	.border-radius-tl-#{$local}{
		border-top-left-radius: 1upx * $local !important;
	}
	.border-radius-tr-#{$local}{
		border-top-right-radius: 1upx * $local !important;
	}
	.border-radius-bl-#{$local}{
		border-bottom-left-radius: 1upx * $local !important;
	}
	.border-radius-br-#{$local}{
		border-bottom-right-radius: 1upx * $local !important;
	}
  /*宽度upx*/
  .width-#{$local} {
    width: 1upx * $local !important;
  }
	.fweigh-#{$local}{
		font-weight: 1*$local;
	}
  $local: $local - 1
}
$line: 10;
	@while $line >=0 {
		.text-ellipsis-#{$local}{
		  overflow:hidden;
		  text-overflow: ellipsis;
		  -webkit-line-clamp: 1 * $line;
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		}
		$line: $line - 1
	}
	.text-ellipsis{
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
/*背景颜色*/
.bg-red { background-color: #e54d42; color: #ffffff; }
.bg-orange { background-color: #f37b1d; color: #ffffff; }
.bg-yellow { background-color: #fbbd08; color: #333333; }
.bg-olive { background-color: #8dc63f; color: #ffffff; }
.bg-green { background-color: #39b54a; color: #ffffff; }
.bg-cyan { background-color: #1cbbb4; color: #ffffff; }
.bg-blue { background-color: #0081ff; color: #ffffff; }
.bg-purple { background-color: #6739b6; color: #ffffff; }
.bg-mauve { background-color: #9c26b0; color: #ffffff; }
.bg-pink { background-color: #e03997; color: #ffffff; }
.bg-brown { background-color: #a5673f; color: #ffffff; }
.bg-grey { background-color: #aaa}
.bg-efefef{ background-color: #EFEFEF }
.bg-light-gary{background-color: #e5e5e5; color:#474747}
.bg-gray { background-color: #f0f0f0; color: #333333; }
.bg-black { background-color: #333333; color: #ffffff; }
.bg-white { background-color: #ffffff; color: #0a0a0a; }
.bg-white-ling{ background-color: #f7f7f7;}
.bg-plain{ background-color: #f8f8f8;}
.bg-shadeTop { background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01)); color: #ffffff; }
.bg-shadeBottom { background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); color: #ffffff; }

.backgroun-gradual-origin-yellow { background: linear-gradient(180deg,#f2e7cb,#e1d3b6); }
.backgroun-gradual-green-white { background: linear-gradient(180deg,#04c668,hsla(0,0%,100%,0)); }
.backgroun-gradual-white-tran { background: linear-gradient(180deg,#fff,hsla(0,0%,100%,.5)); }
.backgroun-gradual-light-yellow { background: linear-gradient(180deg,#ffde82,#fff3d9); }
.backgroun-gradual-green { background: linear-gradient(225deg,#00c78a,#04c668); }
.backgroun-gradual-purple { background: linear-gradient(225deg,#ffa8ec,#3e8eff); }
.backgroun-gradual-red-pink { background: linear-gradient(225deg,#ff45d4,#ff7a66); }
.backgroun-gradual-black-gray { background: linear-gradient(225deg,#97a0ab,#5b6778); }
.backgroun-gradual-black-light-back { background: linear-gradient(180deg,#4f6084,#2a303e); }
.backgroun-gradual-golden-origin { background: linear-gradient(180deg,#ffdab9,#f5f5f5); }
.backgroun-gradual-golden-yellow { background: linear-gradient(180deg,#fff2d2,#f5f5f5); }
.backgroun-gradual-azure-light-azure { background: linear-gradient(1turn,rgba(4,105,247,.2),#0469f7); }
.backgroun-gradual-azure-little-azure { background: linear-gradient(270deg,#e5e9f1,#b4d3fd); }
.backgroun-gradual-brown-little-brown { background: linear-gradient(90deg,#4d443f,#211919); }
.backgroun-gradual-red-little-origin { background: linear-gradient(225deg,#e94566,#e86f76); }

.backgroun-light-orange { background: #fbf8ed; }
.backgroun-light-green { background: #f0fff8; }
.backgroun-light-pink { background: #fff3f3; }

.bg-red-light { color: #e54d42; background-color: #fadbd9; }
.bg-orange-light { color: #f37b1d; background-color: #fde6d2; }
.bg-yellow-light { color: #fbbd08; background-color: #fef2ced2; }
.bg-olive-light { color: #8dc63f; background-color: #e8f4d9; }
.bg-green-light { color: #39b54a; background-color: #d7f0dbff; }
.bg-cyan-light { color: #1cbbb4; background-color: #d2f1f0; }
.bg-blue-light { color: #0081ff; background-color: #cce6ff; }
.bg-purple-light { color: #6739b6; background-color: #e1d7f0; }
.bg-mauve-light { color: #9c26b0; background-color: #ebd4ef; }
.bg-pink-light { color: #e03997; background-color: #f9d7ea; }
.bg-brown-light { color: #a5673f; background-color: #ede1d9; }
.bg-grey-light { color: #8799a3; background-color: #e7ebed !important;}

.b-r-10{
	border-radius:10rpx;
}
/*字体颜色*/
.text-green { background-color: #19be6b; color: #fff; }
.text-red, .line-red, .lines-red { color: #e54d42; }
.text-orange, .line-orange, .lines-orange { color: #f37b1d; }
.text-yellow, .line-yellow, .lines-yellow { color: #fbbd08; }
.text-olive, .line-olive, .lines-olive { color: #8dc63f; }
.text-green, .line-green, .lines-green { color: #39b54a; }
.text-cyan, .line-cyan, .lines-cyan { color: #1cbbb4; }
.text-blue, .line-blue, .lines-blue { color: #0081ff; }
.text-purple, .line-purple, .lines-purple { color: #6739b6; }
.text-mauve, .line-mauve, .lines-mauve { color: #9c26b0; }
.text-pink, .line-pink, .lines-pink { color: #e03997; }
.text-brown, .line-brown, .lines-brown { color: #a5673f; }
.text-grey, .line-grey, .lines-grey { color: #8799a3; }
.text-gray, .line-gray, .lines-gray { color: #aaaaaa; }
.text-black, .line-black, .lines-black { color: #333333; }
.text-white, .line-white, .lines-white { color: #ffffff; }
.text-pla{color:#c0c4cc}
// 底部提交按钮
.bottom-button{
	width: 690rpx;
	padding:0 30rpx;
	background:#fff;
	z-index: 999;
	position: fixed;
	bottom: 0;
	left: 0;
	padding-bottom: 0;  
	padding-bottom: constant(safe-area-inset-bottom);  
	padding-bottom: env(safe-area-inset-bottom);  
}
.d-block{
	display:block
}
.text-align-center{
	text-align: center;
}
.text-align-right{
	text-align: right;
}
.text-align-left{
	text-align: left;
}

// 滚动列表盒子
.my-list{
	padding:0 20rpx;
	.item{
		background-color:#fff;
		padding:20rpx;
		border-radius:10rpx;
		margin-top: 20rpx;
	}
}
// empty盒子
.emptybox{
	margin: 100px auto;
	font-size: 16px;
	text-align: center;
}

.border-t{
	border-top: 1px #f7f7f7 solid;
}
.border-b{
	border-bottom: 1px #f7f7f7 solid;
}
.border-l{
	border-left: 1px #f7f7f7 solid;
}
.border-r{
	border-right: 1px #f7f7f7 solid;
}
.search-box {
	padding: 20rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	// 自定义按钮
	.custom-btn{
		height: 40px;
		line-height: 40px;
		border-radius: 4px;
		margin-left: 5px;
		text-align: center;
		flex-shrink: 0;
		padding: 0 10px;
		font-size: 15px;
		background-color:#e54d42;
		color:#fff;
	}
}
.gift-bag-item{
		min-height: 210rpx;
		padding: 40rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
		background: linear-gradient(to bottom right,#000,#333);
		color:#fff;
		.obtn{
			width: 120rpx;
			height: 52rpx;
			line-height: 52rpx;
			border-radius: 26rpx;
			border: 1px #fff solid;
			text-align: center;
			margin-left: 20rpx;
			font-size: 24rpx;
		}
	}
	.store-btn{
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
		background-color: #fff;
		color:#e94566;
		font-size: 28rpx;
	}

	